import React from './react';
import ReactDOM from './react-dom';

// const element = (
//   <div>
//       <h1 className='title' style={{
//         color: '#FF0000'
//       }}>我很帅</h1>
//       <p style={{
//         border: '1px dashed blue',
//         color: '#ddd',
//       }}>
//         <span>Hello jsx</span>
//       </p>
//   </div>
// );

// const Popup = (props) => {
//   return (
//     <div>
//       <h1 className='title' style={props?.titleStyle}>{props.title}</h1>
//       <p style={props?.descriptionStyle}>
//         <span>{props?.description}</span>
//       </p>
//       <div>
//         {props.children}
//       </div>
//     </div>
//   );
// };

class Popup extends React.Component {
  render() {
    return (
      <div>
        <h1 className='title' style={this.props?.titleStyle}>{this.props.title}</h1>
        <p style={this.props?.descriptionStyle}>
          <span>{this.props?.description}</span>
        </p>
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

const element = (
  <Popup
    title={'我很帅'}
    titleStyle={{
      color: '#FF0000'
    }}
    description={'Hello jsx'}
    descriptionStyle={{
      border: '1px dashed #000',
      color: '#ddd'
    }}
  >
    我很美
  </Popup>
);

// const element = React.createElement('h1', {
//   className: 'title',
//   style: {
//     color: '#FF0000',
//   },
// }, React.createElement('span', {}, 'hello'), React.createElement ...);

console.log(element);

ReactDOM.render(element, document.getElementById('root'));
